<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传照片 - Gallery</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <style>
        :root {
            --primary-bg: #1a1a1a;
            --accent-gold: #d4af37;
            --text-light: #f8f8f8;
            --text-muted: #a0a0a0;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background: var(--primary-bg);
            color: var(--text-light);
            overflow-x: hidden;
        }
        
        .nav-blur {
            backdrop-filter: blur(20px);
            background: rgba(26, 26, 26, 0.8);
        }
        
        .gradient-text {
            background: linear-gradient(135deg, var(--accent-gold), #f4d03f);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .drop-zone {
            border: 2px dashed #4b5563;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .drop-zone:hover {
            border-color: var(--accent-gold);
            background: rgba(212, 175, 55, 0.05);
        }
        
        .drop-zone.drag-over {
            border-color: var(--accent-gold);
            background: rgba(212, 175, 55, 0.1);
            transform: scale(1.02);
        }
        
        .preview-item {
            transition: all 0.3s ease;
        }
        
        .preview-item:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }
        
        .progress-bar {
            transition: width 0.3s ease;
        }
        
        .floating-particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }
        
        .particle {
            position: absolute;
            width: 2px;
            height: 2px;
            background: var(--accent-gold);
            border-radius: 50%;
            opacity: 0.6;
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0.6; }
            50% { transform: translateY(-20px) rotate(180deg); opacity: 0.3; }
        }
        
        .upload-animation {
            animation: uploadPulse 2s ease-in-out infinite;
        }
        
        @keyframes uploadPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
    </style>
</head>
<body>
    <!-- Floating Particles Background -->
    <div class="floating-particles" id="particles"></div>
    
    <!-- Navigation -->
    <nav class="fixed top-0 w-full z-50 nav-blur border-b border-gray-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <a href="index.html" class="text-xl font-bold gradient-text">Gallery</a>
                </div>
                <div class="hidden md:block">
                    <div class="ml-10 flex items-baseline space-x-8">
                        <a href="index.html" class="text-gray-300 hover:text-yellow-400 px-3 py-2 text-sm font-medium transition-colors">首页</a>
                        <a href="gallery.html" class="text-gray-300 hover:text-yellow-400 px-3 py-2 text-sm font-medium transition-colors">照片墙</a>
                        <a href="upload.html" class="text-yellow-400 px-3 py-2 text-sm font-medium">上传</a>
                        <a href="about.html" class="text-gray-300 hover:text-yellow-400 px-3 py-2 text-sm font-medium transition-colors">关于</a>
                    </div>
                </div>
                
                <!-- User Menu -->
                <div class="hidden md:flex items-center space-x-4">
                    <div id="user-menu" class="hidden items-center space-x-3">
                        <button id="user-menu-btn" class="flex items-center space-x-2 text-gray-300 hover:text-yellow-400 transition-colors">
                            <img id="user-avatar" src="resources/default-avatar.jpg" alt="头像" class="w-8 h-8 rounded-full">
                            <span id="username" class="text-sm font-medium"></span>
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                            </svg>
                        </button>
                    </div>
                    <a href="login.html" id="login-btn" class="text-gray-300 hover:text-yellow-400 px-3 py-2 text-sm font-medium transition-colors">登录</a>
                    <a href="register.html" id="register-btn" class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg text-sm font-medium transition-colors">注册</a>
                </div>
            </div>
        </div>
        
        <!-- User Dropdown Menu -->
        <div id="user-dropdown" class="hidden absolute right-4 top-16 mt-2 w-48 bg-gray-800 rounded-lg shadow-lg border border-gray-700 z-50">
            <div class="py-2">
                <a href="profile.html" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-yellow-400 transition-colors">个人中心</a>
                <a href="upload.html" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-yellow-400 transition-colors">上传照片</a>
                <a href="gallery.html" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-yellow-400 transition-colors">我的照片</a>
                <hr class="border-gray-700">
                <button id="logout-btn" class="block w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-red-400 transition-colors">退出登录</button>
            </div>
        </div>
    </nav>

    <!-- Upload Section -->
    <section class="pt-24 pb-16 px-4">
        <div class="max-w-4xl mx-auto">
            <!-- Header -->
            <div class="text-center mb-12">
                <h1 class="text-4xl md:text-5xl font-bold gradient-text mb-4">上传照片</h1>
                <p class="text-gray-400 text-lg max-w-2xl mx-auto">
                    分享您的精彩摄影作品，让更多人欣赏到您的创作才华
                </p>
            </div>

            <!-- Upload Area -->
            <div class="mb-8">
                <div id="drop-zone" class="drop-zone rounded-2xl p-12 text-center">
                    <div class="upload-animation">
                        <svg class="w-16 h-16 mx-auto mb-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-semibold mb-4">拖拽照片到这里</h3>
                    <p class="text-gray-400 mb-6">或者点击选择文件</p>
                    <input type="file" id="file-input" multiple accept="image/*" class="hidden">
                    <button onclick="document.getElementById('file-input').click()" 
                            class="bg-yellow-500 hover:bg-yellow-600 text-black px-8 py-3 rounded-lg font-semibold transition-all transform hover:scale-105">
                        选择文件
                    </button>
                    <p class="text-sm text-gray-500 mt-4">
                        支持 JPG, PNG, GIF, WebP 格式，单张图片最大 10MB
                    </p>
                </div>
            </div>

            <!-- Preview Section -->
            <div id="preview-section" class="hidden mb-8">
                <h2 class="text-2xl font-bold mb-6">照片预览</h2>
                <div id="preview-container" class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <!-- Preview items will be added here -->
                </div>
                
                <!-- Upload Actions -->
                <div class="flex justify-center space-x-4 mt-8">
                    <button id="upload-btn" 
                            class="bg-green-500 hover:bg-green-600 text-white px-8 py-3 rounded-lg font-semibold transition-all transform hover:scale-105">
                        开始上传
                    </button>
                    <button id="cancel-upload" 
                            class="bg-gray-600 hover:bg-gray-700 text-white px-8 py-3 rounded-lg font-semibold transition-all">
                        取消
                    </button>
                </div>
            </div>

            <!-- Upload Progress -->
            <div id="upload-progress" class="hidden">
                <h2 class="text-2xl font-bold mb-6">上传进度</h2>
                <div id="upload-progress-container" class="space-y-4">
                    <!-- Progress items will be added here -->
                </div>
            </div>

            <!-- Upload History -->
            <div class="mt-16">
                <h2 class="text-2xl font-bold mb-6">最近上传</h2>
                <div id="recent-uploads" class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <!-- Recent uploads will be displayed here -->
                </div>
                <div class="text-center mt-8">
                    <a href="profile.html" class="text-yellow-400 hover:text-yellow-300 font-medium transition-colors">
                        查看所有上传 →
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-black py-12 px-4">
        <div class="max-w-7xl mx-auto text-center">
            <div class="mb-8">
                <h3 class="text-2xl font-bold gradient-text mb-4">Gallery</h3>
                <p class="text-gray-400 max-w-md mx-auto">
                    用心记录每一个美好瞬间，用镜头诉说生活的故事
                </p>
            </div>
            <div class="border-t border-gray-800 pt-8">
                <p class="text-gray-500">
                    © 2025 Gallery. 保留所有权利。
                </p>
            </div>
        </div>
    </footer>

    <script src="mode/auth.js"></script>
    <script src="mode/upload.js"></script>
    <script>
        // 创建浮动粒子
        function createParticles() {
            const particlesContainer = document.getElementById('particles');
            const particleCount = 30;
            
            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.left = Math.random() * 100 + '%';
                particle.style.top = Math.random() * 100 + '%';
                particle.style.animationDelay = Math.random() * 6 + 's';
                particle.style.animationDuration = (Math.random() * 4 + 4) + 's';
                particlesContainer.appendChild(particle);
            }
        }

        // 显示最近上传的照片
        function displayRecentUploads() {
            const recentContainer = document.getElementById('recent-uploads');
            const currentUser = authManager.getCurrentUser();
            
            if (!currentUser || !window.uploadManager) {
                recentContainer.innerHTML = '<p class="text-gray-400 text-center col-span-full">请先登录查看上传历史</p>';
                return;
            }

            const userPhotos = window.uploadManager.getUserPhotos(currentUser.id);
            const recentPhotos = userPhotos.slice(-4); // 显示最近4张

            if (recentPhotos.length === 0) {
                recentContainer.innerHTML = '<p class="text-gray-400 text-center col-span-full">还没有上传过照片</p>';
                return;
            }

            recentContainer.innerHTML = recentPhotos.map(photo => `
                <div class="bg-gray-800 rounded-lg overflow-hidden hover:transform hover:scale-105 transition-all duration-300">
                    <img src="${photo.url}" alt="${photo.title}" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="font-semibold text-white mb-2 truncate">${photo.title}</h3>
                        <p class="text-gray-400 text-sm mb-2 line-clamp-2">${photo.description}</p>
                        <div class="flex justify-between items-center text-xs text-gray-500">
                            <span>${new Date(photo.uploadDate).toLocaleDateString()}</span>
                            <span>${photo.private ? '私有' : '公开'}</span>
                        </div>
                    </div>
                </div>
            `).join('');
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            createParticles();
            
            // 检查登录状态
            if (!authManager.isLoggedIn()) {
                authManager.showMessage('请先登录再上传照片', 'warning');
                setTimeout(() => {
                    window.location.href = 'login.html';
                }, 2000);
                return;
            }

            // 页面加载动画
            anime({
                targets: '#drop-zone',
                opacity: [0, 1],
                scale: [0.9, 1],
                duration: 800,
                easing: 'easeOutExpo',
                delay: 200
            });

            // 显示最近上传
            setTimeout(() => {
                displayRecentUploads();
            }, 500);
        });
    </script>
</body>
</html>